<script>
/**
 * @desc 底部固定的按钮栏
 */

import { mapState } from 'vuex'
import { navTo } from '@/utils'
import callIco from '@/assets/icons/call.svg'
import shareIco from '@/assets/icons/share.svg'

export default {
  name: 'travel-detail-bottom-menu',
  data: () => ({ callIco, shareIco }),
  computed: { ...mapState('SignIn', ['isLogin', 'canOrder']) },
  methods: {
    navTo,
    handleGoto() {
      if (this.isLogin) {
        if (this.canOrder) {
          navTo('create-order')
        } else {
          wx.showModal({
            title: '提示',
            content: '请先到个人页面完成用户信息',
            showCancel: false,
            success: res => {
              if (res.confirm) {
                navTo('account-info')
              }
            }
          })
        }
      } else {
        wx.showModal({
          title: '提示',
          content: '请先授权登陆',
          showCancel: false,
          success: res => {
            if (res.confirm) {
              wx.switchTab({ url: '/pages/account/main' })
            }
          }
        })
      }
    }
  }
}
</script>


<template>
  <div class="travel-detail-bottom-menu">
    <span class="bottom-btn" for="service">
      <img :src="callIco" class="bottom-icon">
      <span class="text">客服</span>
    </span>
    <span class="bottom-btn">
      <img :src="shareIco" class="bottom-icon">
      <span class="text">分享</span>
    </span>
    <span class="submit" @click="handleGoto">立即预定</span>

    <!-- 客服按钮 -->
    <button id="service" open-type="contact" style="display:none;"></button>
  </div>  
</template>

<style lang="scss" scoped>
$bottom-icon-size: 25px;
.travel-detail-bottom-menu {
  display: flex;
  align-items: stretch;
  box-shadow: 0 0 5px #ccc;

  .bottom-btn {
    width: 4em;
    padding: 4px 0;
    text-align: center;
    background-color: #fff;
  }
  .bottom-icon {
    display: block;
    width: $bottom-icon-size;
    height: $bottom-icon-size;
    margin: 0 auto;
  }
  .text {
    display: block;
    font-size: 14px;
    color: $gray-font-color;
  }

  .submit {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    color: #fff;
    font-weight: bold;
    background-color: $main-color;
  }
}
</style>
